<!-- 危固废1 -->
<template>
    <div>
        <div id="mainLarge1" style="width: 100%;height:8.5rem;position: absolute;left: 0;right: 0;top: 0px;margin: auto;">
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
// import { RequestStatisticGetPriceOfSettle } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    var chartDom = document.getElementById('mainLarge1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
        },
        title: {
            text: '今日收车数',
            top: '95px',
            left: 'center',
            textStyle: {
                fontSize: '12',
                fontWeight: '200',
                color: '#fff'
            }
        },
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 240,
                splitNumber: 12,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(16, 210, 233, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(4, 105, 185, 1)'
                        }
                    ]),
                    shadowColor: 'rgba(0,138,255,0.45)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 4
                },
                pointer: {
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                    length: '75%',
                    width: 5,
                    color: '#2c3852',
                    offsetCenter: [0, '1%']
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 4
                    }
                },
                axisTick: {
                    splitNumber: 2,
                    lineStyle: {
                        width: 1,
                        color: '#fff'
                    }
                },
                splitLine: {
                    length: 5,
                    lineStyle: {
                        width: 1,
                        color: '#2c3852'
                    }
                },
                axisLabel: {
                    distance: 2,
                    color: '#2c3852',
                    fontSize: 0
                },
                detail: {
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 15,
                        color: '#FFFFFF',
                    },
                    valueAnimation: true,
                },
                data: [
                    {
                        value: 200,
                    },
                ],

            }
        ]
    };

    option && myChart.setOption(option);
})
</script>
<style lang="scss" scoped></style>